<template>
  <div class="wrapper" ref="wrapper">
    
      <div class="conternt">
        <div class="conternt1">
          <div class="a"><img v-lazy="props.clientImage" /></div>
          <div class="conternt2">
            <div>{{ props.clientName }}</div>
          </div>
          <p class="conternt3">{{ props.createTime }}</p>

          <img class="b" v-lazy="props.image[0]" alt="" />
          <ul class="give">
            <li>
              <img
                src="https://image.hongbeibang.com/Fqv9VBHXG627znbKlZYnHQMTHVdc?200X200&imageView2/1/w/38/h/38"
                alt=""
              /><span>50</span>
            </li>
            <li>
              <img
                src="https://image.hongbeibang.com/Fi6E0gsACPeVV5_xgH5JBn6PN45m?200X200&imageView2/1/w/38/h/38"
                alt=""
              /><span>打赏</span>
            </li>
            <li>
              <img
                src="https://image.hongbeibang.com/FiZ5-B7_rmV_gnPl97P-FkpjSlij?200X200&imageView2/1/w/38/h/38"
                alt=""
              /><span>评论</span>
            </li>
          </ul>
        </div>
        <div class="gotop" :class="{ fixed: isFixed }" @click="goback">
          <img
            src="https://image.hongbeibang.com/FrIiahAq_aEalPRiQP09YjhM9was?80X80&imageView2/1/w/80/h/80"
            alt=""
          />
        </div>
      </div>
    </div>
  
</template>

<script>
// 导入better-scroll
import BScroll from "better-scroll";
export default {
  data() {
    return {
      // 4、添加是否吸顶标识 true吸顶，false固定
      isFixed: false,
      
    };
  },

  
  mounted() {
    
    // 1、监听屏幕滚动
    window.addEventListener("scroll", (e) => {
      // 2、获取滚动条距离顶部高度
      let scrollTop = document.documentElement.scrollTop;
    
      // 6、根据滚动条高度来决定是否吸顶
      if (scrollTop >= 400) {
        this.isFixed = true;
        
      } else {
        this.isFixed = false;
      }
    });
  },

  props: {
    props: Object,
  },
  methods: {
    goback(e) {
      document.documentElement.scrollTop = 0 + "px";
    },
  },
};
</script>

<style lang="scss" scoped>
.conternt {
  width: 100%;
  height: 380px;
  margin-top: 0px;
  .conternt1 {
    width: 100%;
    height: 44px;
    float: left;
    .a {
      background: none;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      overflow: hidden;
      box-sizing: border-box;
      border: 1px solid;
      border-color: #e7e2e5;
      margin-left: 15px;
      float: left;
      img {
        width: 38px;
        height: 38px;
      }
    }
    .b {
      width: 219px;
      height: 239px;
      margin: 10px 0 25px 20px;
    }
    .conternt2 {
      text-align: left;
      font-size: 15px;
      height: 20px;
      line-height: 20px;
      color: #999999;
      margin-left: 70px;
    }
    .conternt3 {
      margin-left: 70px;
      text-align: left;
      font-size: 13px;
      height: 20px;
      line-height: 20px;
      color: #999999;
    }
  }
  .give {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-around;
    border-top: 1px;
    border-top: 1px solid;
    border-top-color: #e7e2e5;
    padding-bottom: 10px;

    border-bottom: 10px solid #f5f7f9;

    li {
      // &.active {
      //        color: red;
      //    }
      img {
        width: 20px;
        height: 20px;
        margin-top: 4px;
      }
      span {
        font-size: 15px;
        color: grey;
        display: inline-block;
        margin-left: 5px;
        margin-top: 10px;
      }
    }
  }
  .gotop {
    display: none;
    position: fixed;
    right: 10px;
    bottom: 100px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .fixed {
    display: block;
  }
}
</style>
